<template>

	<view>
		<view v-if="isShowTitleTip" class="usertip">点击格子可以高亮显示不需要默写的字词</view>

		<view id="vc" ref="vc" :style="warpHeight">

			<canvas v-for="(item,index) in drawElementsPageList" @click="ck($event)" :style="canvasHeightStype"
				:canvas-id="`myCanvas${index}`" :id="`myCanvas${index}`">
			</canvas>
		</view>
		<view style="height: 140rpx;"></view>
		<!-- 意见反馈按钮 -->
		<cover-view v-if="isShowTitleTip" class="demo_div">
			<cover-view @click="btnSetClick" class="btn">{{setBtnText}}</cover-view>
			<cover-view class="btn" @click="savePaper">保存</cover-view>
		</cover-view>

		<cover-view v-if="isShowPopWin" class="popWin">
			<cover-view class="form-item">
				<cover-view class="form-title">试卷标题</cover-view>
				<cover-view class='cover-input' @tap="tapInput">
					<cover-view class="text">{{drawPageParams.title}}</cover-view>
					<input class="input" maxlength="18" placeholder="最多18个字" v-model="drawPageParams.title" @input="change" :focus="inputFocus"
						@blur="blurInput"></input>
				</cover-view>

			</cover-view>

			<cover-view class="form-item">
				<cover-view class="form-title">格子类型</cover-view>
				<cover-view class='cover-image'>
					<cover-view v-for="(item,index) in boxTypeList" :key="index" class="cover-image-item">
						<cover-image style="width: 50rpx;height: 50rpx;" @click="boxTypeChange(item.id)"
							:src="item.image">
						</cover-image>
						<cover-view style="margin-left: 10rpx;">{{item.name}}</cover-view>
					</cover-view>
				</cover-view>
			</cover-view>

			<cover-view class="form-item">
				<cover-view class="form-title">格子颜色</cover-view>
				<cover-view class='cover-image'>
					<cover-view v-for="(item,index) in boxColorList" :key="index" class="cover-image-item">
						<cover-image style="width: 50rpx;height: 50rpx;" @click="boxColorChange(item.id)"
							:src="item.image">
						</cover-image>
						<cover-view style="margin-left: 10rpx;">{{item.name}}</cover-view>
					</cover-view>
				</cover-view>
			</cover-view>
		</cover-view>
		
			<view><u-top-tips type="primary"  ref="uTips"></u-top-tips></view>

	</view>

</template>

<script>
	import DrawElementsSource from '@/utils/DrawElementsSource'
	import DrawElements from '@/utils/DrawElements'
	import DrawPageParams from '@/utils/DrawPageParams'
	import DrawElementsFactory from '@/utils/DrawElementsFactory'
	import DrawTools from '@/utils/DrawTools'
	import * as PaperApi from '@/api/paper/index'
	export default {
		data() {
			return {
				checkBoxImage: '../../static/checkbox.png',
				uncheckBoxImage: '../../static/uncheckbox.png',
				startTime: "2020",
				endTime: "2020",
				color: 'red',
				setBtnText: '隐藏设置',
				inputFocus: false, // input 框的focus状态
				inputInfo: '请输入', // cover-view 显示的 input 的输入内容,初始值充当placeholder作用
				isShowTitleTip: false,
				isShowPopWin: false,
				canvasHeightStype: '',
				a4hStype: '',
				warpHeight: '',
				windowWidth: 0,
				canvasWidth: 0,
				canvasHeight: 0,
				drawElementsPageList: [],
				clickEventList: [],
				drawDataSource: {},
				drawPageParams: {},
				savePaperParams:{title:'',boxType:1,boxColor:[],pinyinList:[],wordList:[]},
				boxTypeList: [{
					id: 1,
					name: '方格',
					image: '../../static/checkbox.png',
					checked: true
				}, {
					id: 2,
					name: '田字格',
					image: '../../static/uncheckbox.png',
					checked: false
				}, {
					id: 3,
					name: '米字格',
					image: '../../static/uncheckbox.png',
					checked: false
				}],
				boxColorList: [{
					id: 1,
					name: '黑色',
					color: '#3E3F42',
					rgb:[62,63,66],
					image: '../../static/checkbox.png',
					checked: true
				}, {
					id: 2,
					name: '绿色',
					color: '#5EAF65',
					rgb:[94,175,101],
					image: '../../static/uncheckbox.png',
					checked: false
				}, {
					id: 3,
					name: '红色',
					color: '#C06A6A',
					rgb:[192,106,106],
					image: '../../static/uncheckbox.png',
					checked: false
				}]

			}
		},
		methods: {
			ck(event) {
				var x = event.detail.x
				var y = event.detail.y
				this.clickEventList.push({
					"x": x,
					"y": y
				})
				this.drawTest()
			},
			drawTest() {
				
				this.drawPageParams.drawDataSource = this.drawDataSource
				this.drawPageParams.canvasWidth = this.windowWidth - 20
				this.drawPageParams.canvasHeight = this.canvasHeight
				const drawElementsFactory = new DrawElementsFactory(this.drawPageParams)
				drawElementsFactory.clickEventList = this.clickEventList
				this.drawElementsPageList = drawElementsFactory.createDrawElements().geteDrawElements()
				let ph = uni.upx2px(25) + (this.drawElementsPageList.length-1) * uni.upx2px(10)
				this.warpHeight = `height:${this.drawElementsPageList.length * this.canvasHeight + ph}px`
				let drawTools = new DrawTools()
				drawTools.drawElementsPageList = this.drawElementsPageList
				drawTools.canvasWidth = this.canvasWidth
				drawTools.canvasHeight = this.canvasHeight
				drawTools.draw()
			},
			blurInput(e) {
				this.drawPageParams.title = e.detail.value
				this.inputFocus = false
				this.drawTest()
			},
			tapInput(){
				this.inputFocus = true
			},
			change(e) {
				this.drawPageParams.title = e.detail.value
			},
			btnSetClick() {
				this.isShowPopWin = !this.isShowPopWin
				this.setBtnText = this.setBtnText == '展开设置' ? '隐藏设置' : '展开设置'
			},
			boxTypeChange(e) {
				this.boxTypeList.map(item => {
					if (item.id == e) {
						item.checked = true
						this.drawPageParams.boxType = item.id
						item.image = this.checkBoxImage
					} else {
						item.checked = false
						item.image = this.uncheckBoxImage
					}

				})
			    setTimeout(()=>{
			    	this.drawTest()
			    },100)
			},
			boxColorChange(e) {
				this.boxColorList.map(item => {
					if (item.id == e) {
						item.checked = true
						this.drawPageParams.boxColor = item.color
						this.drawPageParams.rgb = item.rgb
						item.image = this.checkBoxImage
					} else {
						item.checked = false
						item.image = this.uncheckBoxImage
					}

				})
				setTimeout(()=>{
					this.drawTest()
				},100)
				
			},
			savePaper() {	
				const app = this
				this.savePaperParams.title = this.drawPageParams.title
				this.savePaperParams.boxType = this.drawPageParams.boxType
				this.savePaperParams.boxColor = this.drawPageParams.rgb
				this.savePaperParams.pinyinList = this.drawPageParams.drawDataSource.pinyinList
				this.savePaperParams.wordList = this.drawPageParams.drawDataSource.wordList
				if(app.drawDataSource.wordList== undefined || app.drawDataSource.wordList.length == 0){
					app.$refs.uTips.show({
						title: '没查可生成的字词',
						type: 'success',
						duration: '2300'
					})
					return false
				}
				PaperApi.savePaper(app.savePaperParams).then(res => {
					if(res.code == 200){
						app.$toast("保存成功", 1000, false)
						app.$store.commit('SET_PAPER', res.data)
						uni.switchTab({url:"/pages/paperlist/index"})
					}
					
				}).catch(error => {
					console.log(error) 			
				})
			}
		},
		onReady: function(e) {
			this.drawPageParams = new DrawPageParams()
			this.drawDataSource = this.$store.getters.pagerDataList
			const system = uni.getSystemInfoSync()
			// this.a4w = 750 - 20
			// this.a4h = (297/210) * this.a4w
			// this.a4h = 'height:' + this.a4h + 'rpx'
			
			this.windowWidth = system.windowWidth
			this.canvasWidth = system.windowWidth - 10 * 2
			this.canvasHeight = (842 / 595) * this.canvasWidth
			this.canvasHeightStype = 'height:' + this.canvasHeight + 'px'
			this.drawPageParams.title = '看拼音写词语练习题'
			this.drawPageParams.boxColor = 'black'
			this.drawPageParams.rgb = [62,63,66]
			this.drawPageParams.boxType = 1
			this.drawTest()
			this.isShowTitleTip = true
			this.isShowPopWin = true
		}
	}
</script>

<style>
	body {
		background-color: gainsboro;
	}


	#vc {

		width: auto;
		padding-left: 10px;
		padding-top: 0px;
		bottom: 100rpx;
		padding-right: 10px;

	}

	canvas {

		border-radius: 1px;
		background-color: white;
		width: 100%;
		margin-bottom: 10px;

	}

	.demo_div {
		position: fixed;
		display: flex;
		align-content: center;
		text-align: left;
		z-index: 999;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background-color: ghostwhite
	}

	.popWin {
		position: fixed;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 999;
		left: 0;
		right: 0;
		bottom: 100rpx;
		width: 100%;
		height: 300rpx;
		padding-top: 20rpx;
		background-color: white;
	}

	.usertip {
		width: auto;
		text-align: center;
		height: 30px;
		line-height: 30px;
		font-size: 14px;
	}


	.btn {
		display: inline-block;
		text-align: center;
		padding-top: 20rpx;
		width: 200rpx;
		height: 50rpx;
		margin-left: 50rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		background-color: #114cdb;
		color: white;
		border-radius: 5px;

	}



	.text {
		height: 32px;
		line-height: 32px;
	}

	.input {
		height: 32px;
		line-height: 32px;
		/* margin-top为text的高度，保持视觉上一致 */
		margin-top: -32px;
	}

	.form-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: left;
		width: 100%;
		margin-bottom: 20rpx;

	}

	.form-title {
		display: inline-block;
		padding-left: 10rpx;
		width: 120rpx;
		color: black;
	}

	.cover-input {
		position: relative;
		left: 280rpx;
		width: 550rpx;
		height: 32px;
		line-height: 32px;
		border-radius: 5px;
		border: 1px solid #bfbfbf;
		background-color: rgba(255, 255, 255, 0.9);
		transform: translateX(-50%);

	}

	.cover-image {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: left;
		left: 280rpx;
		width: 550rpx;
		height: 32px;
		line-height: 32px;
		border-radius: 5px;
		transform: translateX(-50%);
	}

	.cover-image-item {
		display: inline-flex;
		justify-content: left;
		align-items: center;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}
</style>